<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>伸缩布局示例</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, " />
		<style>
			body {
				margin: 0;
				background: #f1f1f1;				
			}
			header {
				background: #ffffff;
				margin: 0 1rem;
				height: 5rem;
				width: 38rem;	/* 整个宽度为40rem，左右各留1rem空*/
				display: flex;
				align-items: center;      /*垂直居中*/
				justify-content: center;  /*水平居中*/
				font-size: 2.5em;
				color:white;
				font-weight: 600;
				background-image: url(images/bg1.jpg);
				background-size:100% 100%;  /*背景自适应*/
			}
			nav{
				margin: 0 1rem;	
			}
			nav ul div{
				display: flex;
			}
			nav ul {
				list-style-type: none;
				display: flex;
				justify-content: space-between;/*让两部分的导航分在左右*/
				background: #333;
				margin: 0;
				padding: 0;
			}
			nav ul li {
				display: flex;
			}
			nav ul li a {
				text-decoration: none;
				color: white;
				padding: 1rem;
			}
			nav ul li a:hover {
				background: #ddd;
				color: black;
			}
			.container {
				display: flex;
				flex-direction: row;/* 中间区域容器左右布局*/
				margin: 1rem;
			}
			.main {
				display: flex;				
				flex: 3.5;    /* 左右比例为3.5:1*/
				flex-direction: column;/* 主区域本身为上下布局*/
			}
			section.article {
				background: #ffffff;
				padding: 1.25rem;
				margin-bottom: 1.25rem;
			}
			section.article h3{
				font-size: 1.5em;
				margin-top: 0rem;
				text-align: center;
			}
			.main_img_container img{
				width: 100%;  /*图片自适应宽度和高度*/
				height: 100%;
			}
			.sider {
				flex: 1;   /* 左右比例为3.5:1*/
				margin-left: 1.25rem;
			}
			.sider>* {
				background: #ffffff;
				margin-bottom: 15px;
				padding: 1.25rem;
			}
			.sider img{
				width: 100%;/*图片自适应宽度和高度*/
				height: 100%;
			}
			footer {
				background: #ddd;
				padding: 0.625rem;
				text-align: center;
			}
		</style>
		<script>
			(function(win, doc) {
				// 1.获取 client 屏幕宽度
				let clien_width = doc.documentElement.clientWidth || doc.body.clientWidth;
				// 2.如果屏幕的宽度发生改变 触发 onresize 方法
				window.onresize = function() {
					let new_width = doc.documentElement.clientWidth || doc.body.clientWidth;
					fn(new_width);
				}
				//3. “原始宽度”或者“改变后的宽度”经过换算，赋值到 html=>style=>font-size    其中640px 是设计稿的原始尺寸（设计时以640px宽度为基准）
				var fn = function(width) {
					doc.documentElement.style.fontSize = 16 * (width / 640) + "px";
				}
				fn(clien_width);
			})(window, document)
		</script>

	</head>
	<body>
		<header>
			J&R Informations
		</header>
		<nav>
			<ul>
				<div>
					<li><a href="#">新闻</a></li>
					<li><a href="#">产品</a></li>								
					<li><a href="#">服务</a></li>		
					<li><a href="#">论坛</a></li>
					<li><a href="#">互动</a></li>
				</div>
				<div>
					<li><a href="#">更多</a></li>
				</div>
			</ul>
		</nav>			
		<div class="container">
			<main class="main">
				<section class="article">
						<h3>新款Chromecast：Google TV用户界面体验</h3>
						<h5>2020 年 10 月 17日</h5>
						<div class="main_img_container"><img src="images/chromecast.jpg" ></div>
						<article>
							<p>种种迹象表明在明天的硬件活动中，谷歌将会推出 Chromecast 新品。在“官方”正式发布之前，外媒 The Verge 亲自上手体验了这款 Chromecast。正如过去几周的谣传信息，新款 Chromecast 不仅是可充当电视棒播放来自手机/电脑端发送过来的多媒体内容，而且现在引入了合适的菜单系统和熟悉的用户界面，并配备了一个遥控器。</p>
<p>虽然名称上依然为 Chromecast，但是谷歌最新的流媒体设备实际上是由 Android TV 驱动的，在使用方式上更接近于 Roku 或亚马逊 Fire TV。Chromecast 可以下载 Netflix、Amazon Prime Video、Disney Plus、HBO Max 等应用。你可以使用遥控器控制来浏览它们，然后播放某些内容，而不需要从其他设备上进行投屏。</p>
						</article>
				</section>
				<section class="article">
						<h3>三季度全球电视出货量创下历史新高</h3>
						<h5>2020 年 10 月 18日</h5>
						<div class="main_img_container"><img src="images/tv.jpg" ></div>
						<article>
							<p>TrendForce为历史高点给出了几个不同的因素。它说，在北美，电视需求增加了20%，这是因为人们因COVID-19而在家中度过了更多时间。这家供应链分析公司称，季度性的激增还考虑到了今年上半年推迟的电视出货量。</p>
							<p>虽然五家主要电视厂商的出货量都有所增长，但TCL以52.7%的同比增幅领跑。三星的出货量同比增长36.4%，与第二季度相比增长67.1%。与此同时，LG与2019年第三季度相比，增幅较小，为6.7%，但自上季度以来，LG的增幅高达81.7%。</p>
						</article>
				</section>
			</main>
			<aside class="sider">
				<div>
					<h3 style="margin-top: 0">关于我</h3>
					<div><img src="images/building.jpg" ></div>
					<p>关于我的一些信息..</p>
				</div>
				<div>
					<h3>热门文章</h3>
					<div><img src="images/5G.jpg" ></div>
					<div><img src="images/ecoin.jpg" ></div>
					<div><img src="images/playgames.jpg" ></div>
				</div>
				<div>
					<h3>关注我们</h3>
					<p>JnR@facebook、JnR@Twitter</p>
				</div>
			</aside>			
		</div>
		<footer>
			<div>J&R Informations &copy;</div>
		</footer>
	</body>
</html>
